<template>
  <div :class="wrpCls">
    <!-- <awm-mSG :class="prefixCls"></awm-mSG> -->
    <avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="prefixCls" />
    <!-- <select-lang :class="prefixCls" /> -->
  </div>
</template>

<script>
import AvatarDropdown from './AvatarDropdown'
import SelectLang from '@/components/SelectLang'
// import AwmMSG from './msg'
import { mapGetters } from 'vuex'

export default {
  name: 'RightContent',
  components: {
    AvatarDropdown,
    SelectLang,
    // AwmMSG,
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action',
    },
    isMobile: {
      type: Boolean,
      default: () => false,
    },
    topMenu: {
      type: Boolean,
      required: true,
    },
    theme: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      showMenu: true,
      currentUser: {},
    }
  },
  computed: {
    ...mapGetters({ userInfo: 'userInfo' }),
    wrpCls() {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${this.isMobile || !this.topMenu ? 'light' : this.theme}`]: true,
      }
    },
  },
  watch: {
    'userInfo.name': function (n, o) {
      this.currentUser = null
      setTimeout(() => {
        this.currentUser = {
          name: n,
        }
      }, 1500)
    },
  },
  mounted() {
    setTimeout(() => {
      this.currentUser = {
        name: this.$store.getters.userInfo.name,
      }
    }, 1500)
  },
}
</script>
